<template>
	<view class="content" :style="{'padding-top':top+'px','min-height':windowheight+'px'}">
		<Navbar title="拍摄编号" bgColor="#d86784" :backIcon="false" style="color: #ffffff;z-index: 1;"></Navbar>
		<view class="shotnum">
			<view class="psbh_list">
				<view class="space_block">
					<image src="../../static/logo.png"></image>
				</view>
				<view class="psxh_tit">拍摄编号</view>
				<view class="psxh_num">{{client_no}}</view>
				<view class="psxh_bz">拍摄地：{{shootPlace}}</view>
				<view class="psxh_bz">昵称：{{nickName}}</view>
				<view class="shotn_btn">
					<button  @tap.stop="tomyalbum">进入我的相册</button>
				</view>
			</view>
			<view class="wxtx_list">
				<view class="wxtx_tit">温馨提醒</view>
				<view class="wxtx_item">1.拍摄前请与摄影师确认拍摄编号</view>
				<view class="wxtx_item">2.拍摄后在我的相册里可预览高清效果</view>
				<view class="wxtx_item">3.支付一定费用后即可下载高清相片</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import { ref,onMounted } from 'vue'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const baseUrl = getApp().globalData.baseUrl
	const title=ref('Hello')
	const windowheight=ref()
	const platform = ref()
	const statusBar = ref()
	const customBar = ref()
	const top = ref()
	const client_no = ref()
	const nickName = ref()
	const shootPlace = ref('')
	const toHome = () => {
		uni.switchTab({
			url: "/pages/index/index",
		})
	}
	const tomyalbum = () => {
		uni.redirectTo({
			url: "/pages/myalbum/myalbum"
		})
	}
	const getColumnHeight=()=>{
		uni.getSystemInfo({
			success(res) {
				console.log(res)
				platform.value = res.platform
				windowheight.value=res.screenHeight
				// #ifdef MP-WEIXIN
				statusBar.value = res.statusBarHeight
				const custom = wx.getMenuButtonBoundingClientRect()
				customBar.value = custom.bottom + custom.top - res.statusBarHeight
				// #endif
				// #ifdef APP-PLUS
				statusBar.value = res.statusBarHeight
				customBar.value = res.statusBarHeight + 45
				// 这里是在安卓手机上加上 3 像素（当时好像是在安卓水滴屏上，系统导航栏高度较低才加上去的，大家可以真机自己调试一下）
				if (res.platform == "android") {
					statusBar.value += 3
					customBar.value += 3
				}
				// #endif
			}
		})
		top.value = customBar.value
		windowheight.value=windowheight.value-top.value
		//console.log(statusBar.value, customBar.value, top.value,windowheight.value)
	}
	onLoad((opts)=>{
		console.log(opts)
		shootPlace.value=opts.shootPlace
	})
	onShow(()=>{
		const now = new Date().getTime()
		if (!uni.getStorageSync('token') || now > uni.getStorageSync('expireTime')) {
			uni.reLaunch({
				url: "/pages/login/login"
			})
		}else{
			nickName.value = JSON.parse(uni.getStorageSync("user_info")).nickName
			client_no.value = JSON.parse(uni.getStorageSync("user_info")).client_no
		}
	})
	onMounted(()=>{
		getColumnHeight()
	})
</script>
<style lang="less">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-image: linear-gradient(to bottom,#d95e7d,#ffffff);
	}
	:deep(.uni-navbar .uni-navbar-btn-text text),
	:deep(.uni-navbar .uni-nav-bar-text) {
		font-size: 32rpx !important;
	}
	
	:deep(.uni-navbar .uni-navbar--border) {
		border-bottom-color: #8388feaa !important;
	}
	
	.shotnum {
		width: 90%;
		//background-size: 100% 100%;
		margin: auto;
		//margin-top: 20rpx;
		//min-height: 1050rpx;
	}
	
	.psbh_list {
		//margin-top: 40rpx;
		//padding-top: 4rem;
		border-radius: 20rpx;
		text-align: center;
		position: relative;
		background-color: #fff;
		padding-bottom: 40rpx;
		.space_block {
			margin-top: 10rpx;
			height: 100rpx;
			width: 100rpx;
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0);
			image {
				height: 100%;
				width: 100%;
			}
		}
		
	}
	
	.psxh_tit {
		padding-top: 5rem;
		font-size: 35rpx;
	}
	
	.psxh_num {
		font-size: 96rpx;
		font-weight: bold;
		margin: 64rpx;
	}
	
	.psxh_bz {
		font-size: 28rpx;
		line-height: 86rpx;
		text-align: left;
		padding-left: 100rpx;
	}
	
	.wxtx_list {
		margin-top: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	
	.wxtx_tit {
		text-align: center;
		font-size: 32rpx;
		margin-bottom: 40rpx;
	}
	
	.wxtx_item {
		font-size: 26rpx;
		padding-left: 64rpx;
		line-height: 64rpx;
	}
	.shotn_btn{
		margin-top: 1rem;
	}
	.shotn_btn button {
		background-color: #e77c90;
		border-radius: 10rpx;
		color: #fff;
		font-size: 28rpx;
		width:500rpx;
		height: 100rpx;
		line-height: 100rpx;
	}
</style>